<template>
	<view class="child">
		<view class="child_team">
			<view class="decor_case">
				<view class="desi_team">
					<view class="item" v-for="(item,index) in list.data"
                      :key="index">
						<view class="team_userimg">
							<view class="team_userimgs" v-for="(items,index) in item.list"
                          :key="index"
                          @click="skiptoshop(items.user_id,item.role_id)">
                          <view class="team_title">{{item.role_name}}</view>
								<image :src="items.user_picture" class="user_list"></image>
								<view class="team_names">{{items.nick_name}}</view>
								<view class="team_exprice">{{items.working_years}}年经验</view>
							</view>
<!-- 							<image :src="`${constant.imgUrl}center/icon_adduser.png`" class="team_adduser" v-if="$_isShow(ownerUserId)" @click="addteam"
							></image> -->
						</view>
					</view>
					<!-- 为空时邀请样式 -->
					<view class="team_userimg team_empty" v-if="showadd && $_isShow(ownerUserId)">
						<view class="add_team_img">
							<image :src="`${constant.imgUrl}design/add_team_empty.png`"></image>
						</view>
						<view>还没有团队成员，快去邀请同时加入~</view>
						<view class="team_adduser_btn" @click="addteam">去邀请</view>
					</view>
				</view>
			</view>
		</view>
       <invite-member :show.sync="shareStatus" :qrCodeImg="qrCodeImg" ref="inviteMember"></invite-member>
	</view>
</template>

<script>

import { getTeamList } from '@/api/center/index'
import { list, share } from '@/mixins'
import { jumpOtherUser, weixinBase64src } from '@/utils/common'
import { getqQrCode } from '@/api/center'
import inviteMember from '@/pages/components/inviteMember'

export default {
	name: 'alliance',
	props: {
		ownerUserId: [Number, String]
	},
	components: {
		inviteMember
	},
	mixins: [list, share],
	data() {
		return {
			constant: this.$constant,
			showadd: false,
			qrCodeImg: '',
			shareStatus: true
		}
	},
	created() {
		this.getteam()
	},

	methods: {
		init() {
			this.resetList()
			this.getteam()
		},
		getteam(refresh = false) { // 团队列表数据
			const data = {
				owner_user_id: this.ownerUserId
			}
			getTeamList(data).then((res) => {
				this.completes(res)
				this.showadd = !!this.list.data.length
				refresh && this.$emit('stopRefresh')
			})
		},
		refresh() {
			// 下拉刷新
			this.resetList()
			this.getteam(true) // 加载数据
		},
		reachBottom() {
			if (this.list.finished) {
				uni.showToast({
					title: '没有更多了',
					icon: 'none'
				})
				return
			}
			if (this.list.loading) {
				return
			}
			this.getteam()
		},
		addteam() {
			this.getQrCode().then(() => {
				this.$refs.inviteMember.$refs.popup.open()
			})
		},
		skiptoshop(user_id, role_id) { // 到该成员店铺主页
			jumpOtherUser(user_id, role_id)
		},
		getQrCode() {
		    let that = this
			return getqQrCode({
				owner_user_id: this.ownerUserId
			}).then(async(res) => {
				this.qrCodeImg = res.data.qrcode
				let imgUrl = res.data.qrcode
				// #ifdef  MP-WEIXIN
				imgUrl = await weixinBase64src(res.data.qrcode)
				// #endif
				let params = {
					...res.data,
					title: '邀请组队', // 分享标题
					desc: '邀请组队', // 分享内容
					imgUrl: imgUrl,
					pagePath: `/pages/design/designCompany/indexNew`,
					owner_user_id: this.ownerUserId,
					puser_id: this.ownerUserId
				}
				that.jweixinFn(params)
			})
		}
	}
}
</script>

<style scoped>
.child {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

.decor_case {
    width: 90%;
    height: auto;
    margin-top: 10px;
    margin-left: 5%;
    margin-right: 5%;
}

.team_adduser {
    width: 100px;
    height: 100px;
    margin-top: 52px;
}

.desi_team {
    width: 100%;
    height: auto;
    display: flex;
    padding-bottom: 50px;
}

.desi_team .item {
    margin-top: 30px;
    flex: 1 0 25%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}

.desi_team .item .team_title {
    font-size: 30px;
}

.team_userimg {
    width: 100%;
    height: auto;
    /* margin-top: 20px; */
    display: flex;
    flex-wrap: wrap;
    /* align-items: center; */
}

.team_userimgs {
    /* width: 118px; */
    height: auto;
    text-align: center;
    position: relative;
    /* margin-left: 44px; */
    flex: 0 0 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team_userimgs {
    flex: 0 0 25%;
}

.team_userimgs .team_names {
    font-size: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.team_userimgs .team_exprice {
    font-size: 20px;
    color: #999999;
    line-height: 1.3;
}

.team_userimgs .user_list {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    margin-bottom: 10px;
    border: 1px solid #cccccc; /*no*/
    margin-top: 20px;
}

.team_userimg.team_empty {
    font-size: 26px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.team_userimg.team_empty .add_team_img {
    margin: 10px auto 20px;
    width: 342px;
    height: 204px;
}

.team_userimg.team_empty .add_team_img image {
    width: 100%;
    height: 100%;
}

.team_userimg.team_empty .team_adduser_btn {
    width: 240px;
    font-size: 30px;
    color: #3a1b04;
    padding: 20px 0;
    border-radius: 50px;
    background-color: #ffd11a;
    margin: 20px auto 10px;
}

/* .decor_case .mask {
    width: 91%;
}

.decor_case .mask .item {
    margin-left: 0;
    width: 100%;
} */
</style>
